import {createStackNavigator,createSwitchNavigator,} from 'react-navigation';
import {connect} from 'react-redux';
// v2 @2.0.8版本 --- 注意： 最新版本会导致报错
import {createReactNavigationReduxMiddleware,reduxifyNavigator} from 'react-navigation-redux-helpers';
// ----------+++++++++++++++++==========++++++++++++++++++++--------------
import WelcomePage from '../page/WelcomePage/WelcomePage';
import DynamicTabsNatigator from './DynamicTabsNatigator';
import LoanTypePage from '../page/loanTypePage/App'
import LoanDetail from '../page/loanDetail/App';
import CreditcardDetail from '../page/creditcardDetail/App';
import Login from '../page/login/App';
import MyWebView from '../page/webView/App';
import First from '../page/first/App';
import Browse from '../page/browse/App';
import Line from '../page/lines/App';
// ----------+++++++++++++++++==========++++++++++++++++++++--------------

export const rootCom = 'Init';  //设置根路由

import color from '../public/widget/color';
const NavigationOptionsHeaders = (title) => { //包装器
  return {
    navigationOptions:({ navigation }) => {
      let params = navigation.state;
      return {
        title:params.params.title ? params.params.title : title,
        headerStyle: {
          backgroundColor: color.whiteBc,
        },
        headerTintColor: color.themeColor,
        headerTitleStyle: {
            flex: 1,
        },
      } 
    }
  }
}
const InitNavigator = createStackNavigator({
  WelcomePage: {
      screen: WelcomePage,
      navigationOptions: {
          header: null,// 可以通过将header设为null 来禁用StackNavigator的Navigation Bar
      }
  },
});
const MainNavigator = createStackNavigator({
      DynamicTabsNatigator:{
        screen:DynamicTabsNatigator,
        navigationOptions:{
          header:null,
        }
      },
      LoanTypePage:{
        screen:LoanTypePage,
        ...NavigationOptionsHeaders('贷款类别')
      },
      LoanDetail:{
        screen:LoanDetail,
        ...NavigationOptionsHeaders('贷款详情')
      },
      CreditcardDetail:{
        screen:CreditcardDetail,
        ...NavigationOptionsHeaders('信用卡详情')
      },
      Login:{
        screen:Login,
        ...NavigationOptionsHeaders('登录')
      },
      MyWebView:{
        screen:MyWebView,
        ...NavigationOptionsHeaders('详情')
      },
      First:{
        screen:First,
        navigationOptions:{
          header:null,
        }
      },
      Browse:{
        screen:Browse,
        ...NavigationOptionsHeaders('浏览记录')
      },
      Line:{
        screen:Line,
        ...NavigationOptionsHeaders('我的额度')
      },

});
export const RootNavigator = createSwitchNavigator({
  Init:InitNavigator,
  Main:MainNavigator
},{
  navigationOptions: {
      header: null,
  }
});

/**
 * 1.初始化react-navigation与redux的中间件，
 * 该方法的一个很大的作用就是为createReduxContainer的key设置actionSubscribers(行为订阅者)
 * 设置订阅者@https://github.com/react-navigation/react-navigation-redux-helpers/blob/master/src/middleware.js#L29
 * 检测订阅者是否存在@https://github.com/react-navigation/react-navigation-redux-helpers/blob/master/src/middleware.js#L97
 * @type {Middleware}
 */
export const middleware = createReactNavigationReduxMiddleware(
  'root',
  state => state.nav,
);
/**
* 2.将根导航器组件传递给 reduxifyNavigator 函数, 注意：3.0版本 已经变更为createReduxContainer 和 react-native@0.57.4 版本不匹配
* 并返回一个将navigation state 和 dispatch 函数作为 props的新组件；
* 注意：要在createReactNavigationReduxMiddleware之后执行
*/
const AppWithNavigationState = reduxifyNavigator(RootNavigator,'root');
/**
* State到Props的映射关系
* @param state
*/
const mapStateToProps = state => ({
  state: state.nav,//v2
});
/**
* 3.连接 React 组件与 Redux store
*/
export default connect(mapStateToProps)(AppWithNavigationState);